<!-- 饼状图 -->
<template>
  <div id="hapie"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, reactive, watch } from "vue";
import { useStore } from "@/store/useStore";

const store = useStore();
const option = reactive({
  title: {
    text: '建筑高度分布',
    left: '16'
  },
  toolbox: {
    show: true,
    //orient: 'vertical',
    left: '200px',
    top: 'top',
    feature: {
      saveAsImage: {}
    }
  },
  tooltip: {
    trigger: 'item',
    position: function (point) {
      // point 包含数据点坐标和元素信息
      // 返回 [x, y] 偏移量，相对于数据点的位置
      // 例如：向右偏移 10px，向下偏移 5px
      return [point[0] + 10, point[1] - 5];
    },
  },
  legend: {
    top: '10%',
    left: '60%',
    orient: 'horizontal',
    width: 90,
    itemGap: 8,
    itemWidth: 55,
  },
  series: [
    {
      name: '建筑高度面积分布（万㎡）',
      type: 'pie',
      center: ['32%', '50%'],
      radius: ['25%', '45%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
      ]
    }
  ]
});

let pie = null;

watch(() => store.areasByHeight, () => {
  pie.dispose();
  option.series[0].data = store.areasByHeight.map(item => ({ name: item.name, value: (item.value / 10000).toFixed(2) }));
  pie = echarts.init(document.getElementById("hapie"));
  option && pie.setOption(option);
}, { deep: true })

onMounted(() => {
  pie = echarts.init(document.getElementById("hapie"));
  option && pie.setOption(option);
});
</script>

<style scoped>
#hapie {
  width: 100%;
  height: 400px;
}
</style>
